<template>
    <Header title="选择软产品" :custom-left-click="backHome" left-arrow></Header>
    <div class="product-list">
        <div v-for="product in productlist" :key="product.title" class="product-item flex-center">
            <div class="icon">
                <img :src="product.icon" alt="">
            </div>
            <div class="des">
                <div class="title">
                    {{ product.title }}
                </div>
                <div class="pr">
                    {{ product.des }}
                </div>
                <div class="btns">
                    <Button
                        class="pro-des" plain color="#D2D2D2" type="primary"
                        @click="toIntroduction(product.introductionRouteName)"
                    >
                        产品介绍
                    </Button>
                    <Button
                        class="put-on" color="#E60044" type="danger"
                        @click="onPutClick(product.type, product.routeName)"
                    >
                        投放演示
                    </Button>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import Header from '@/components/Header/index.vue';
import { Button } from 'vant';
import { getImageUrl } from '@/utils';
import { getProjectId } from '@/api/common';
import { store } from '@/store';
import { useRouter } from 'vue-router';
import { Toast } from 'vant';
import type { ToastWrapperInstance } from 'vant/es/toast/types';

const productlist = ref([
    {
        title: '品牌引爆',
        type: 5,
        des: '需要迅速提升知名度',
        routeName: 'productsBrandBreakout',
        introductionRouteName: 'productsBrandBreakoutDetail',
        icon: getImageUrl('pr-break.png')
    },
    {
        title: '京潮计划',
        type: 2,
        des: '需要电商品效协同',
        routeName: 'productsJd',
        introductionRouteName: 'productsJdDetail',
        icon: getImageUrl('pr-jd.png')
    }, {
        title: '标签选点',
        type: 3,
        des: '控制费用、精准投放',
        routeName: 'selectByTag',
        introductionRouteName: 'selectByTagDetail',
        icon: getImageUrl('pr-tab.png')
    }, {
        title: '防遗忘包',
        type: 6,
        des: '知名品牌记忆维护',
        routeName: 'productsBrandBreakoutPreventForgetting',
        introductionRouteName: 'productsPreventForgettingDetail',
        icon: getImageUrl('pr-fgt.png')
    }, {
        title: 'LBS投放',
        type: 4,
        des: '需要线下门店引流',
        routeName: 'productsLbs',
        introductionRouteName: 'productsLbsDetail',
        icon: getImageUrl('pr-lbs.png')
    }, {
        title: '竞价投放',
        type: 1,
        des: '最大限度节约成本',
        routeName: 'productsBid',
        introductionRouteName: 'productsBidDetail',
        icon: getImageUrl('pr-jj.png')
    }
]);


const router = useRouter();
let toastLoading: ToastWrapperInstance;
async function onPutClick(type: number, name: string) {
    toastLoading = Toast.loading({
        message: '加载中....',
        forbidClick: true,
        duration: 0, // 持续展示 toast
    });
    const res = await getProjectId({ publishStrategy: type }).catch(() => undefined);
    if (res) {
        store.commit('app/setHomeProjectId', res);
    }
    toastLoading && toastLoading?.clear();
    await router.push({
        name,
    });
}
async function backHome() {
    await router.push({
        name: 'home'
    });
}
const toIntroduction = async (name: string) => {
    await router.push({ name });
};
</script>

<style lang="scss" scoped>
.product-list {
    padding: 12px;
    padding-bottom: calc(env(safe-area-inset-bottom));
    padding-bottom: calc(contain(safe-area-inset-bottom));

    &.padding-bottom {
        padding-bottom: 150px;
    }

    .product-item {
        margin-top: 0;
        margin-bottom: 12px;
        justify-content: space-evenly;
        padding: 16px 0;
        background-color: #fff;
        border-radius: 10px;

        .icon {
            width: 66px;
            height: 66px;
            background-size: 66px 66px;

            // background-color: pink;
            img {
                width: 100%;
                height: auto;
            }
        }

        .title {
            color: #333333;
            font-weight: 600;
            margin-bottom: 5px;
            font-size: 16px;
        }

        .des {
            font-size: 12px;
            color: #848484;
        }

        .btns {
            text-align: left;
            margin-top: 10px;
            width: 214px;
            display: flex;
            justify-content: space-between;

            .pro-des,
            .put-on {
                width: 100px;
                height: 30px;
                // margin-right: 15px;
                border-radius: 6px;
            }

            .pro-des {
                color: #222 !important;
                border: 0.5px solid #eee;
            }
        }
    }
}
</style>
